<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="Librarys/Cookie/cookieconsent.min.css">
  <link rel="stylesheet" href="style.css">
  <link href="css/Font_Roboto.css" rel="stylesheet">
  <script src="Librarys/fuse.js" charset="utf-8"></script>
  <script src="Librarys/d3.min.js" charset="utf-8"></script>
  <meta name="description" content="novatec techradar, where you can see all technologies used by the novatec gmbh company.">
  <title>Novatec Techradar</title>
</head>
<body >
  <nav>
    <div class="logo">
      <a href="https://novatec-gmbh.de" target="_blank">
        <img src="Data/Pics/nt-logo.png.svg" id="nav-logo" alt="nt-logo">
      </a>
    </div>
    <div class="input">
      <img id="home-button" src="Data/Pics/home.svg">
      <input class="nav-elements" type="text" id="nav-search" name="search" onfocus="this.value=''" value="Search a technology" onkeyup="search(this.value)" onblur="this.value='Search a technology'">
      <span id="select_cluster_browser_arrow">
      <select class="nav-elements" id="nav-cluster" onchange="change_cluster(this.value);cluster=this.value">
        <option selected value="category">Category</option>
        <option value="topic">Topic</option>
        <option value="nocluster">No Cluster</option>
      </select>
      </span>
      <span id="select_view_browser_arrow">
      <select class="nav-elements" id="nav-view" onchange="show_cluster(this.value)">
        <option value="category">Category</option>
        <option selected value="ring">Rings</option>
      </select>
      </span>
    </div>
  </nav>
  <main>
    <div class="svg">
      <svg width="100%" viewBox="0 0 1000 1000">
        <filter id="shadow" height="230%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="10" /> <!-- stdDeviation is how much to blur -->
          <feOffset dx="0" dy="0" result="offsetblur" /> <!-- how much to offset -->
          <feComponentTransfer>
            <feFuncA type="linear" slope="0.5" /> <!-- slope is the opacity of the shadow -->
          </feComponentTransfer>
          <feMerge>
            <feMergeNode />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </svg>
    </div>
    <div class="content">
      <div id="cluster">
        <div>
          <h1 class="header"></h1>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <img>
        </div>
        <div>
          <h1 class="header"></h1>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <img>
        </div>
        <div>
          <h1 class="header"></h1>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <img>
        </div>
        <div>
          <h1 class="header"></h1>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <img>
        </div>
        <div>
          <h1 class="header"></h1>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <img>
        </div>
        <div>
          <h1 class="header"></h1>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <img>
        </div>
      </div>
      <div id="filter">
        <div class="header">
          <img class="arrow">
          <h1></h1>
        </div>
      </div>
      <div id="points">
        <div class="header">
          <img class="arrow">
          <h1></h1>
        </div>
        <div class="parts_holder">
        </div>
      </div>
      <div id="point">
        <div class="header">
          <img class="arrow">
          <h1></h1>
        </div>
        <div class="point_information">
          <div class="info"><p></p>
            <p></p>
            <p></p>
            <p></p></div>
          <div class="description"><p></p></div>
        </div>
        <fieldset class="novatec_information">
          <legend>What we do with it</legend>
          <article></article>
        </fieldset>
      </div>
    </div>
    <div id="footer">
        <div class="pages">
          <p></p>
          <p></p>
        </div>
        <div class="impressum">
          <a target="_blank" href="https://www.novatec-gmbh.de/impressum/">Impressum</a>
        </div>
    </div>
  </main>
  <div id="tooltip">
    <p>Placeholder</p>
    <i></i>
  </div>
  <div id="info-tooltip">
    <p>?</p>
  </div>
  <div id="info">
    <h3 style="text-align:center">The Rings explained:</h3>
    <article>
      <p><span class="info-text"><img class="info-icon" src="Data/Pics/Observe.svg">Observe:</span><br>
        In this ring you will find all the topics that we at Novatec have in mind and are currently observing.</p>
      <p> <span class="info-text"><img class="info-icon" src="Data/Pics/Evaluate.svg">Evaluate:</span><br>
        This ring contains all topics that are of interest to us and that we are already evaluating and investigating.</p>
      <p> <span class="info-text"><img class="info-icon" src="Data/Pics/Build-Up.svg">Build-Up:</span><br>
        Here you will find all topics that are currently under construction in our company and where we are building up expertise. Topics in this ring have been observed and evaluated earlier.</p>
      <p> <span class="info-text"><img class="info-icon" src="Data/Pics/Work.svg">Work:</span><br>
        All topics in this ring are used by us in connection with consulting, development and training services. We are experts in these topics.</p>
      <p> <span class="info-text"><img class="info-icon" src="Data/Pics/Reduce.svg">Reduce:</span><br>
        However, we are slowly reducing the use of these topics and are certain that we will use them less in the near future.</p>
    </article>
  </div>
  <div id="start">
    <br>
    <h1 style="text-align:center">The Rings explained</h1>
    <article>
      <p><span class="info-text"><img class="info-icon" src="Data/Pics/Observe.svg">Observe:</span><br>
        In this ring you will find all the topics that we at Novatec have in mind and are currently observing.</p>
      <p> <span class="info-text"><img class="info-icon" src="Data/Pics/Evaluate.svg">Evaluate:</span><br>
        This ring contains all topics that are of interest to us and that we are already evaluating and investigating.</p>
      <p> <span class="info-text"><img class="info-icon" src="Data/Pics/Build-Up.svg">Build-Up:</span><br>Here you will find all topics that are currently under construction in our company and where we are building up expertise. Topics in this ring have been observed and evaluated earlier.</p>
      <p> <span class="info-text"><img class="info-icon" src="Data/Pics/Work.svg">Work:</span><br>
        All topics in this ring are used by us in connection with consulting, development and training services. We are experts in these topics.</p>
      <p> <span class="info-text"><img class="info-icon" src="Data/Pics/Reduce.svg">Reduce:</span><br>
        However, we are slowly reducing the use of these topics and are certain that we will use them less in the near future.</p>
    </article>
  </div>
  <script src="global.js" charset="utf-8"></script>
  <script src="Dynamic/cluster.js" charset="utf-8"></script>
  <script src="Dynamic/filter.js" charset="utf-8"></script>
  <script src="Dynamic/point.js" charset="utf-8"></script>
  <script src="Dynamic/points.js" charset="utf-8"></script>
  <script src="Dynamic/search.js" charset="utf-8"></script>
  <script src="SVG/draw_points.js" charset="utf-8"></script>
  <script src="SVG/draw_radar.js" charset="utf-8"></script>
  <script src="Data_Process/calc_density.js" charset="utf-8"></script>
  <script src="Data_Process/calc_clusters.js" charset="utf-8"></script>
  <script defer src="Data_Process/process_data.js" charset="utf-8"></script>
</body>

</html>
